<template>
	<view class="">
		<view class="content u-skeleton">
			
			<!-- head搜索区域 -->
			<view class="head">
				<view class="search ">
					<image src="../../static/icon/address2.png" class="u-skeleton-circle"></image>
					<image src="../../static/logo/white.png" class="u-skeleton-circle"></image>
					<view class="search_input u-skeleton-fillet">
						<u-search
							:disabled="true"
							@click="goSearch"
							shape="square"
							action-text=" " 
							bg-color='#fff'
							:input-style="{fontSize:'20rpx'}"
						>
						</u-search>
					</view>
					<image src="../../static/icon/dp.png"  class="dp u-skeleton-circle"></image>
				</view>
				<view class="cate">
					<view class="catenavtab u-skeleton-rect">
						<u-tabs ref="tabs"
							:list="catenav"
							name="catename"
							bar-width="30"
							bar-height="8"
							active-color="white"
							bg-color="111"
							font-size="28"
							:show-bar="showBar"
							inactive-color='white'
							:is-scroll="true" 
							:current="currentnav" 
							@change="changecurrent"></u-tabs>
					</view>
					<view class="category u-skeleton-rect" >
						<image src="../../static/icon/cate.png"></image>
						<text>分类</text>
					</view>
				</view>
			</view>
			
			<!-- swiper区域  使用插件实现-->
		
				<!-- <u-swiper :list="bannerlist" name="img"  height="390" @click="goActive"></u-swiper> -->
			<!-- <u-swiper
			    :list="bannerList"
				keyName="img"> -->
				<view class="wrap">
						<u-swiper :list="list" :effect3d='true'></u-swiper>
					</view>
			</u-swiper>
			<!-- 快速导航区域 -->
			<view class="quicknav">
				<view class="row" v-for="(item,index) in quicknav" :key='index' hover-class="touchOpacity">
					<image :src="item.src" class="u-skeleton-circle"></image>
					<text class="u-skeleton-rect">{{item.text}}</text>
				</view>
			</view>

			<!-- 秒杀商品推荐区域 -->
			<view class="seckill">
				<!-- 秒杀左侧区域 -->
				<view class="leftseckill u-skeleton-rect">
					<view class="title " hover-class="touchOpacity">
						<text>限时秒杀</text>
						<text>查看更多 > </text>
					</view>
					<view class="left_seckill_info">
						<u-count-down bg-color="#5D7E37" 
							color="white" 
							ref="uCountDown" 
							timestamp="128989" 
							:autoplay="true" 
							font-size="20"
							separator="zh"
							height="30"></u-count-down>
					</view>
					<image src="../../static/img/pic/commodity/01.png" mode="widthFix" class="seckill_img"></image>
				</view>
				<!-- 秒杀右侧区域 -->
				<view class="rightseckill">
					<view class="top u-skeleton-rect">
						<view>品牌上新</view>
						<view>9点整，抢大牌</view>
						<view hover-class="touchOpacity">疯抢红包 > </view>
					</view>
					<view class="bottom u-skeleton-rect">
						<view>日用好物</view>
						<view>愿君多采撷</view>
						<view hover-class="touchOpacity">塞满奖券 > </view>
					</view>
				</view>
			</view>
			
			<!-- 推荐商品区域 -->
			<view class="tuijian  u-skeleton-rect">
				<!-- 标题区域 -->
				<view class="tuijian_title">
					<text :class="tjActiveIndex == 0 ? 'tuijian_active' : '' ">双十一尖货预购</text>
					<text :class="tjActiveIndex == 1 ? 'tuijian_active' : '' ">畅购全球</text>
				</view>
				<!-- 滚动商品区域 -->
				<scroll-view scroll-x  class="tuijian_scroll_x">
					<view class="tuijian_scroll_x_row" v-for="(item,index) in tuijianshop" :key="index" hover-class="touchOpacity">
						<image :src="item"></image>
					</view>
				</scroll-view>
			</view>
			
			<!-- 推荐商品区域 -->
			<view class="recommendgood">
				<!-- 推荐导航 -->
				<view class="recommendnav  u-skeleton-fillet">
					<u-subsection
						:bold="bold" 
						:active-color="activeColor" 
						:current="current"
						:mode="mode" 
						:list="['热门推荐', '上新推荐', '所有商品']"
						@change="currentChange"
					></u-subsection>
				</view>
				<view class="recommendlist">
					<view class="recommendrow u-skeleton-rect" 
						v-for="(item,index) in shoplist" :key="index" @click="todetail(item.id)"
					>
						<!--赖加载显示图片  此处注意百度小程序问题需要指定固定高度-->
						<view class="image">
							<u-lazy-load :key="index" :image="item.img" height="200" duration="300"></u-lazy-load>		
						</view>
						
						<view class="recommendrowinfo" hover-class="touchOpacity">
							<text>{{item.goodsname}}</text>
							<text>现价格： ￥{{item.price}}</text>
							<text>原价格：￥{{item.market_price}}</text>
							<text>
								立即抢购
							</text>
						</view>
					</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="topview"></view>
				<!-- #endif -->
			</view>
		</view>
		<!-- 引入骨架屏-->
		<!--注意： 所以要求在请求数据尚未完成时，填写一些模拟数据，才能让对应的元素有对应的尺寸和位置，供uni.createSelectorQuery查询使用 -->
		<u-skeleton bg-color="rgb(250, 250, 250)" :loading="loading" :animation="animation" 
		:el-color="elColor" :border-radius="borderRadius"></u-skeleton>
	</view>
</template>
<script>
	import checkTokne from "utils/checkToken.js"
	export default {
		data() {
			return {
				list: [{
										image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
										title: '昨夜星辰昨夜风，画楼西畔桂堂东'
									},
									{
										image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
										title: '身无彩凤双飞翼，心有灵犀一点通'
									},
									{
										image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
										title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
									}
								],
				showBar:true,//初始化分类导航底部滑块开关
				currentnav:0,//初始化分类导航下标
				loading: false, // 是否显示骨架屏组件
				animation: true,
				elColor: '#FFC8B4',
				borderRadius: 10,
				mode: 'subsection',
				current: 0,//热推默认选项卡
				activeColor: 'orange',
				bold: true,
				change: true,
				activeIndex:0,//默认分类下标
				catenav:[],
				
				quicknav:[
					{src:'../../static/icon/seckill.png',text:'限时秒杀'},
					{src:'../../static/icon/top.png',text:'畅销商品'},
					{src:'../../static/icon/brand.png',text:'品质大牌'},
					{src:'../../static/icon/selfsupport.png',text:'小U自营'},
					{src:'../../static/icon/integral.png',text:'积分商城'}
				],
				// seckill:{},//秒杀数据
				titmestamp:0,
				img:"../../static/img/face.jpg",
				tuijianshop:[
					'../../static/img/pic/commodity/01.png',
					'../../static/img/pic/commodity/02.png',
					'../../static/img/pic/commodity/03.png',
					'../../static/img/pic/commodity/04.png',
					'../../static/img/pic/commodity/05.png',
				],
				hortgoods:[],//热推商品数据
				shoplist:[
					'../../static/img/pic/commodity/01.png',
					'../../static/img/pic/commodity/02.png',
					'../../static/img/pic/commodity/03.png',
					'../../static/img/pic/commodity/04.png',
					'../../static/img/pic/commodity/05.png',
				],
				tjActiveIndex:0,
				goodsIndex:0 
			}
		},
		onLoad() {
			this.loading=true
			this.getBanner()
			setTimeout(()=>{
			this.loading=false
			},2000)
			
			// #ifdef MP-BAIDU
			this.showBar = false;
			// #endif
			
			// 调用接口一级分类
			this.getcate()
			// 轮播图
			// this.getbanner()
			// 秒杀活动
			this.getseckill()
			// 热门推荐
			this.gethortgoods()
			
		},	
	    onShow(){
			checkTokne(this)
		},
		methods: {
			getBanner() {
			    this.$http({
			     // url: "/api/getbanner"
			    }).then(res => {
			     console.log(res);
			     res.data.list.forEach(item => {
			      console.log(this.$baseURL + item.img);
			      item.img = this.$baseUrl + item.img
			     })
			     this.bannerList = res.data.list
			     console.log(this.bannerList);
			    })
			   },
			// 去活动页
			// goActive(index){
			// 	uni.navigateTo({
			// 		url:`/pages/active/active?item=${JSON.stringify(this.bannerlist[index])}`
				 
			// 	})
			// },
			
			
			// 跳转详情页
			todetail(id){
				
				uni.navigateTo({
					url:`/pages/gooddesc/gooddesc?id=${id}`
				})
				
			},
			
			// 点击热门推荐的选项卡时触发
			currentChange(index){
				this.shoplist=this.hortgoods[index].content
			},
			//http://localhost:3000/api/gethortgoods 热门推荐
			async gethortgoods(){
				let [err,res]= await uni.request({
					url:this.$baseUrl+"/api/gethortgoods"
				})
				// console.log(res)
				if(err){
					uni.showLoading({
						title:"加载中。。。"
					})
					return
				}
				if(res.data.code !=200){
					uni.showLoading({
						title:"加载中。。。"
					})
					return
				}
				res.data.list.forEach(item=>{
					item.content.forEach(item=>{
						item.img=this.$baseUrl+item.img
					})
				})
				this.hortgoods=res.data.list
				this.shoplist=this.hortgoods[0].content
			},
			
			
			// 倒计时  http://localhost:3000/api/getseckill
			async getseckill(){
				
				let [err,res]=await uni.request({
					url:this.$baseUrl+"/api/getseckill"
				})
				if(err){
					uni.showToast({
						title:"加载中...",
						icon:"loading"
					})
					return
				}
				if(res.data.code!=200){
					uni.showLoading({
						title:"加载中..."
					})
					return
				}
				if(!res.data.list){
					return
				}
				if(!res.data.list){
					return
				}
				let {endtime,img}=res.data.list[0]
				img=this.$baseUrl+img
				// 时间戳
				endtime=endtime-new Date().getTime()
				// 转换为秒
				this.timestamp=parseInt(endtime/1000)
				this.img=img
			},
			
			
			// 轮播图数据请求 http://localhost:3000/api/getbanner
			async getbanner(){
				let [err,res]=await uni.request({url:this.$baseUrl+"/api/getbanner"})
				if(err){
					uni.showToast({
						title:"加载中...",
						icon:"loading"
					})
					return
				}
				if(res.data.code!=200){
					uni.showLoading({
						title:"加载中..."
					})
					return
				}
				console.log(res,1111)
				// 渲染页面   处理图片的格式
				// res.data.list.map(item=>{
				// 	item.img=this.$baseUrl+item.img
				// })
				// this.bannerlist=res.data.list
			},
			// http://localhost:3000/api/getcate 一级分类快速分类导航
			 async getcate(){
				let [err,res]=await uni.request({
					url:this.$baseUrl+"/api/getcate"
				})
				// console.log(res)
				if(err){
					uni.showToast({
						title:"加载中...",
						icon:"loading"
					})
					return
				}
				if(res.data.code!=200){
					uni.showLoading({
						title:"加载中..."
					})
					return
				}
				// 渲染页面
				this.catenav=res.data.list
				
				
				
			},
			
			changecurrent(index){
				this.currentnav=index
				// 跳转到列表页
				let cateid=this.catenav[index].id
				uni.navigateTo({
					url:`/pages/goodlist/goodlist?cateid=${cateid}&type=1`
				})
			},
			// 跳转到搜索页面
			goSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
				
			}
		}
	}
</script>

<style>
	
	/* 引入样式 */
	@import url("@/static/css/index.css");
</style>
